<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .active{
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <ul>
            <li :class="{active: num === index}"  @click="active(index)" v-for="(item, index) in goods">商品名称:------{{item.name}}, 数量:---------{{item.num}},价格:------------{{item.price}}</li>
        </ul>

    </div>
    <script>
        /*
            需求: 用户鼠标点击li的时候,将当前li的背景颜色改为黑色,文字颜色改为白色
            思路:
                1. 获取所有li标签
                2. 监听点击事件,绑定函数
                3. 函数里面的代码写好
                    当前li的背景颜色改为黑色,文字颜色改为白色
        */

        new Vue({
            el:'#app',
            data:{
                num: -1,//保存当前激活的是哪一个li active
                goods:[
                    {id:100, name:"槟榔", num:10, price:95},
                    {id:100, name:"芙蓉王", num:5, price:25},
                    {id:100, name:"zeppo打火机", num:8, price:2.5},
                    {id:100, name:"杨玉虎年限定", num:999, price:168},
                    {id:100, name:"6个核弹", num:6, price:999},
                    {id:100, name:"核显卡", num:100, price:1195},
                    {id:100, name:"旺仔牛奶", num:23, price:5},
                ]
            },
            methods:{
                active(index){
                    //当前li的背景颜色改为黑色,文字颜色改为白色
                    this.num = index;
                    console.log("------------active", "num:" + this.num,  index);
                }
            }
        })
    </script>
</body>
</html>